webpack 多入口打包

一、webpack 多入口打包

1.1 结构

假定项目结构有两个入口，主页 home.html 和登录页 login.html ，分为对应的的 js 入口文件为 home.js 和 login.js 。

1.2 插件

那么需要用到 webpack 的一个插件 html-webpack-plugin ，用它自动把打包后的 js 脚本注入到指定的 html 文件中。

1.3 配置

配置 webpack.config.js 文件

const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        home: path.resolve(__dirname, 'src/home.js'),
        login: path.resolve(__dirname, 'src/login.js')
    },
    // 配置打包后文件的输出目录与文件夹
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'static/js/bundle_[chunkhash:8].js'
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './src/home.html',
            filename: 'home.html',
            inject: 'body',
            chunks: ['home'],
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeAttributeQuotes: true
            }
        }),
        new htmlWebpackPlugin({
            template: './src/login.html',
            filename: 'login.html',
            inject: 'body',
            chunks: ['login'],
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeAttributeQuotes: true
            }
        }),
		......
    ]